<template>

    <div>
        <searchCard type-flag="3" @query="query" ref="SearchCard"></searchCard>
        <el-card class="adjust-margin">
            <el-table  :data="tableData" class="fnd-table" tooltip-effect="dark" v-loading="loading"  stripe  style="width:100%">
                <el-table-column
                        show-overflow-tooltip
                        align="center"
                        type="index"
                        label="序号"
                ></el-table-column>
                <el-table-column
                        show-overflow-tooltip
                            prop="branch"
                        align="center"
                        label="分公司"
                        :formatter="getBranchCode"
                ></el-table-column>
                <el-table-column
                        show-overflow-tooltip
                        prop="NodeId"
                        align="center"
                        label="报案号"
                ></el-table-column>
                <el-table-column
                        show-overflow-tooltip
                        prop="caseCreateNo"
                        align="center"
                        label="立案号"
                ></el-table-column>
                <el-table-column
                        show-overflow-tooltip
                        prop="classCode"
                        align="center"
                        label="险种"

                >
                    <template #default="scope">
                        <span v-if="scope.row.coreFlag==1">{{getProductFilter(scope.row)}}</span>
                        <span v-else>{{getKindCodeFilter(scope.row)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        show-overflow-tooltip
                        prop="busiInfoThree"
                        align="center"
                        label="被保险人"
                ></el-table-column>
                <el-table-column
                        show-overflow-tooltip
                        prop="busiInfoOne"
                        align="center"
                        label="损失项目名称"
                ></el-table-column>
                <el-table-column
                        show-overflow-tooltip
                        prop="quantity"
                        align="center"
                        label="数量-单位"
                        :formatter="getQuantityUnit"
                ></el-table-column>
                <el-table-column
                        show-overflow-tooltip
                        prop="deadLine"
                        align="center"
                        label="报价截止日期"
                        :formatter = "getUpdateDate"
                ></el-table-column>
                <el-table-column
                        show-overflow-tooltip
                        prop="operation"
                        align="center"
                        label="操作"
                >
                    <template #default="scope">
                        <el-button @click="detailFun(scope.row.notificationNo,scope.row.busiInfoTwo,'0',scope.row.businessKey)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="margin-top:20px">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="page.pageNum"
                        :page-size="page.pageSize"
                        layout="total,prev,pager,next"
                        :total="page.total"
                ></el-pagination>
            </el-row>
        </el-card>
    </div>

</template>

<script setup lang="ts">
    import searchCard from "@/components/searchCard/searchCard.vue";
    import {
        getkindCode,
        getAllProduct,
        getUpdateDateUtil,
        getBranchCodeUtil,
        getQuantityUnitUtil, plusXing
    } from "@/utils/utils";
    import {ref,reactive,onMounted,computed} from "vue"
    import {useRouter} from "vue-router";
    import {queryTasks} from "@/api";
    import { useDataStore } from '@/store/data';
    import {storeToRefs} from "pinia";
    const dataStore=useDataStore();
    const {username}=storeToRefs(dataStore)
    interface Table{
        branch:string,
        NodeId:number,
        caseCreateNo:number,
        classCode:Array<string>,
        busiInfoThree:string,
        busiInfoOne:string,
        quantity:number,
        deadLine:string

    }
    let page=reactive({})
    let tableData:Table[]=[]
    const router=useRouter()
    const SearchCard=ref(null)
    const loading=ref(false)
    const detailFun=(nodeId,id,type,businessKey)=>{
         loading.value=true
         dataStore.saveControlBtn({gotoUrl:'/offer',gotoName:'报价'})
         dataStore.saveQueryCondition({lossId:id,notificationNo:nodeId,type:type,userCode:dataStore.username,businessKey:businessKey})
         router.push('/offerDetail')
    }
    const getBranchCode=(row)=>{
        return getBranchCodeUtil(row)
    }
    const getUpdateDate=(row)=>{
        return getUpdateDateUtil(row)
    }
    const getKindCode=(row)=>{
        return getkindCode(row)
    }
    const getProduct=(row)=> {
        return getAllProduct(row.classCode)
    }
    const getQuantityUnit=(row)=>{
        return getQuantityUnitUtil(row)
    }
    const handleCurrentChange=(val)=>{
        query(val)
    }
    let query=(val:any)=>{
        const queryArr=searchCard.value.queryArr
        queryArr.pageNum=val||1
        queryTasks(queryArr).then((res)=>{
            if(res.success){
                tableData=res.data.result.map(function(item,index){
                    item.nodeId=plusXing(item.notificationNo,3,2)
                    item.caseCreateNo=plusXing(item.caseCreateNo,3,2)
                    item.busiInfoThree=plusXing(item.busiInfoThree,1,1)
                })
                page={
                    pageNum:res.data.pageNum,
                    pageSize:res.data.pageSize,
                    total:res.data.total
                }
            }
        })

    }
    onMounted(()=>{
          query(()=>{})
    })

    const getProductFilter=computed(()=>{
        return function (row){
           return  getAllProduct(row.classCode)
        }
    })
    const getKindCodeFilter=computed(()=>{
        return function (row){
            return getKindCode(row)
        }
    })
</script>

<style lang="scss" scoped>

</style>
